<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import VarietyTab from './components/varietyTab.vue'
  import VarietyStacking from './components/varietyStacking.vue'
  import ComponentsTab from './components/componentsTab.vue'
  import PackagingRecord from './components/packagingRecord.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: 'winding-variety',
      label: '络筒品种',
      isFit: true,
      slots: { default: h(VarietyTab, { type: 'winding' }) }
    },
    {
      name: 'platform-variety',
      label: '平台品种',
      isFit: true,
      slots: { default: h(VarietyTab, { type: 'platform' }) }
    },
    {
      name: 'stack-variety',
      label: '垛位品种',
      isFit: true,
      slots: { default: h(VarietyTab, { type: 'stack' }) }
    },
    {
      name: 'variety-stacking',
      label: '品种成垛',
      isFit: true,
      slots: { default: h(VarietyStacking) }
    },
    {
      name: 'winding-yarn',
      label: '络筒上纱',
      isFit: true,
      slots: { default: h(ComponentsTab, { type: 'windingYarn' }) }
    },
    {
      name: 'platform-unloading-yarn',
      label: '平台卸纱个数',
      isFit: true,
      slots: { default: h(ComponentsTab, { type: 'unloadingYarn' }) }
    },
    {
      name: 'single-yarn',
      label: '筒纱单纱',
      isFit: true,
      slots: { default: h(ComponentsTab, { type: 'singleYarn' }) }
    },
    {
      name: 'workstation-vision',
      label: '工位视觉',
      isFit: true,
      slots: { default: h(ComponentsTab, { type: 'vision' }) }
    },
    {
      name: 'package',
      label: '包装',
      isFit: true,
      slots: { default: h(ComponentsTab, { type: 'package' }) }
    },
    {
      name: 'packaging-record',
      label: '打包记录',
      isFit: true,
      slots: { default: h(PackagingRecord) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
